<template>
  <LoadPage :show="showPage"/>
  <view class="main">
    <view class="swiper">
      <swiper v-if="productDetailData?.images" @change="swiperChange" class="swiper-box" circular :autoplay="true"
              :interval="2000"
              :duration="500">
        <swiper-item v-for="(item, index) in productDetailData?.images.split(',')" :key="index" class="item">
            <image
                :src="item"
                mode="aspectFill" @click="imagePriview(productDetailData?.images.split(','), index)"/>
          <view class="current-box">
            <view class="current">
              <image src="/static/icon/current.png" mode="aspectFill"/>
              <view class="num">{{ current }}/{{ productDetailData?.images.split(',').length }}</view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="content ">
      <view class="common desc">
        <view class="desc-box">
          <view class="one dispaly-just-between">
            <view class="price">{{ Number(productDetailData?.price).toFixed(2) }}</view>
            <view class="collect">
              <view class="collect-box dispaly-center">
                <view class="num">收藏数{{ productDetailData?.collectNum || 0 }}</view>
                <view class="icon">
                  <image @click="postCollect" :src="productDetailData?.isCollect == 1 ? '/static/icon/harts.png' : '/static/icon/hart.png'"
                         mode="aspectFill"/>
                </view>
              </view>
            </view>
          </view>
          <view class="title">{{ productDetailData?.name }}</view>
          <view class="line"></view>
          <view class="user dispaly-just-between">
            <view class="info dispaly-center">
              <view class="avatar ">
                <image
                    :src="productDetailData?.avatar"
                    mode="aspectFill"/>
                <image class="q" src="/static/icon/q.png" mode="aspectFill"/>
              </view>
              <view class="name">{{ productDetailData?.nickName }}</view>
            </view>
            <view class="user-id">ID{{ productDetailData?.id }}</view>
          </view>
        </view>
      </view>

      <view class="common text" style="margin-bottom: 32rpx"  v-if="userInfo.userId == productDetailData.createUser && bargainingListData.length">
        <view class="title dispaly-align-center">
          <image class="l" src="/static/icon/p.png" mode="aspectFill"/>
          <view class="txt">议价列表</view>
          <image class="r" src="/static/icon/p.png" mode="aspectFill"/>
        </view>
        <view class="f-con">
          <scroll-view @scrolltolower="scrolltolower" scroll-y="true" class="scroll-Y">
            <view class="s-item dispaly-just-between" v-for="(item, index) in bargainingListData" :key="index">
              <view class="s-left">
                <view class="s-name">{{ item.goodsName }}</view>
                <view class="s-user">{{ item.createName }}</view>
                <view class="s-price">￥{{ item.price }}</view>
              </view>
              <view class="s-btn" @click="selectHe(item)" v-if="isShwoSelect != 1">选择TA</view>
            </view>
          </scroll-view>
        </view>
      </view>

      <view class="common text">
        <view class="title dispaly-align-center">
          <image class="l" src="/static/icon/p.png" mode="aspectFill"/>
          <view class="txt">详情描述</view>
          <image class="r" src="/static/icon/p.png" mode="aspectFill"/>
        </view>
        <view class="f-con">
          <!--          <up-parse :content="content"></up-parse>-->
          {{ productDetailData?.intro }}
        </view>
      </view>

    </view>
  </view>
  <view class="btn-box" >
    <view class="item-box dispaly-just-between" v-if="userInfo.userId != productDetailData.createUser">
      <view class="item" @click="bargainingShow = true">
        <view class="b-txt dispaly-align-center">议价</view>
        <image src="/static/icon/xy.png" mode="aspectFill"/>
      </view>
      <view class="item">
        <view class="b-txt dispaly-align-center" style="color: #FFD257 " @click="productPayment">购买</view>
        <image src="/static/icon/buy.png" mode="aspectFill"/>
      </view>
    </view>
  </view>

  <!--  议价-->
  <Pop title="议价" :show="bargainingShow" @close="bargainingShow = false">
    <view class=" w-498 bary-box">
      <view>
        <view class="ipt-box">
          <view class="ipt-bg">
            <image src="/static/pop/four.png" mode="aspectFill"/>
            <input placeholder="请输入议价" type="digit" v-model="bargainingPrice"/>
          </view>
          <view class="edit">
            <image src="/static/pop/five.png" mode="aspectFill"/>
          </view>
        </view>
        <view class="submit-box dispaly-align-center">
          <view class="dispaly-align-center submit-content" @click="submitBarg">
            <image src="/static/pop/seven.png" mode="aspectFill"/>
            <view class="submit">提交</view>
          </view>
        </view>
      </view>
    </view>
  </Pop>
  <!--  通知-->
  <Pop title="通知" :show="noticeShow" @close="noticeShow = false">
    <view class=" w-498 bary-box">
      <view class="notice ">
        <view class="notice-txt dispaly-col-center">
          <view class="not-item">议价成功</view>
          <view class="not-item" @click="productPayment">前往购买</view>
        </view>
        <view class="submit-box dispaly-align-center">
          <view class="dispaly-align-center submit-content" @click="noticeShow = false">
            <image src="/static/pop/seven.png" mode="aspectFill"/>
            <view class="submit">提交</view>
          </view>
        </view>
      </view>
    </view>
  </Pop>
  <view class="back" @click="$goUrl('back')">
    <up-icon name="arrow-left" color="#fff" size="28"></up-icon>
  </view>
</template>

<script setup>
import {ref, onMounted, reactive} from "vue";
import {productDetail, collect, bargaining, bargainingList, select, payment, showSelect} from '@/api/apiList';
import {onLoad} from '@dcloudio/uni-app'
import wsRequest from '@/utils/websocket'
import {  wxPayment, debounce, imagePriview } from '@/utils/util'


const userInfo = uni.getStorageSync('userInfo')
// websocket
let websocketUrl = 'ws://192.168.2.120:8180/websocket/' + uni.getStorageSync('userInfo').userId;
let socket = ref(null)
const initWebsocket = () => {
  socket.value = new wsRequest(websocketUrl, 3000)
  // let data = {value:"传输内容",method:"方法名称"};
  // socket.value.socketSend(data);
  watchSocket()
}

const watchSocket = () => {
  try {
    socket.value.getMessage(opt => {
      console.warn("消息接收：", opt);
    })
  } catch (e) {

  }
}

// 议价
const bargainingPrice = ref('')
// 提交议价
const submitBarg = debounce(async () => {
  {
    if (productDetailData.value.isPrice == 0) {
      if(bargainingPrice.value) {
        await uni.showLoading({
          title: '加载中',
          icon: 'none'
        })
        const res = await bargaining({goodsId: productDetailData.value.id, price: bargainingPrice.value})
        if (res.code == 200) {
          uni.hideLoading()
          bargainingShow.value = false
          // noticeShow.value = true
          await uni.showToast({
            title: '议价成功',
            icon: 'none'
          })
          await getDetail()
        }else {
          uni.hideLoading()
        }
      }else {
        await uni.showToast({
          title: '请填写价格',
          icon: 'none'
        })
      }
    } else {
      bargainingShow.value = false
      await uni.showToast({
        title: '您已议价过这个商品',
        icon: 'none'
      })
    }
  }
}, 800, false)

// 获取议价列表
const queryData = reactive({
  pageSize: 5,
  pageNum: 1,
})
const bargainingListData = ref([])
const getBargainingList = async () => {
  const res = await bargainingList({...queryData, goodsId: productDetailData.value.id})
  if (res.code == 200) {
    if (res.rows.length) {
      bargainingListData.value = [...bargainingListData.value, ...res.rows]
    }
  }
}

// 显示选择
const isShwoSelect = ref('')
const showSel = async () => {
  const res = await showSelect(productDetailData.value.id)
  if(res.code == 200) {
    isShwoSelect.value = res.data
  }
}

const scrolltolower = () => {
  queryData.pageNum++
  getBargainingList()
}

// 选择他
const selectHe = (item) => {
  uni.showModal({
    title: "提示",
    content: "是否选择",
    success: async function (res) {
      if (res.confirm) {
        const res = await select({id: item.id})
        if (res.code == 200) {
          await uni.showToast({
            title: '操作成功',
            icon: 'none'
          })
          await showSel()
        }
      }
    },
  });
}

// 支付debounce
const productPayment = debounce(async () => {
    await uni.showLoading({
      title: '支付中'
    })
    const res = await payment({id:productDetailData.value.id, type:0})
    await wxPayment(res.data, '/subPackage/mine/buy')
    uni.hideLoading()
}, 1000, false)


onMounted(() => {
  // initWebsocket()
})


const productId = ref('')
onLoad(async (option) => {
  productId.value = option.id ? option.id : ''
  await getDetail()
  await showSel()
  await getBargainingList()
})

// 获取商品详情
const productDetailData = ref({})
const showPage = ref(true)
const getDetail = async () => {
  const res = await productDetail(productId.value)
  if (res.code == 200) {
    productDetailData.value = res.data
    showPage.value = false
  }
}

// 收藏
const postCollect = async () => {
  const res = await collect({goodsId: productDetailData?.value.id})
  if (res.code === 200) await getDetail()
}

// 议价show
const bargainingShow = ref(false)
// 通知show
const noticeShow = ref(false)

const content = ref(`<p>露从今夜白，月是故乡明</p><img src="https://cdn.uviewui.com/uview/swiper/2.jpg" alt="Image Description" />`);
const current = ref(1)
const swiperChange = (data) => {
  current.value = data.detail.current + 1
}
</script>

<style lang="scss" scoped>
.back {
  position: fixed;
  left: 32rpx;
  top: 100rpx;
}

.scroll-Y {
  height: 300rpx;
  max-height: 300rpx;

  .s-item:last-child {
    margin-bottom: 0;
  }

  .s-item {
    margin-bottom: 15rpx;
    border: 3rpx solid #4e3b0c;
    background-color: #ffbf0f;
    padding: 20rpx;

    .s-left {
      .s-name {
        font-size: 25rpx;
        font-weight: 900;
      }

      .s-user {
        margin: 10rpx 0;
        font-size: 25rpx;
      }

      .s-price {
        font-size: 27rpx;
        font-weight: 900;
        color: #000;
      }
    }

    .s-btn {
      border: 1rpx solid #4e3b0c;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25rpx;
      font-weight: 900;
      padding: 10rpx 30rpx;
      background-color: #ffd257;
      border-radius: 30rpx;
    }
  }
}

.common {
  padding: 40rpx 20rpx;
  background: #ffd257;
  border-radius: 5rpx;
  border: 5rpx solid #4e3b0c;
}

.btn-box {
  width: 100%;
  height: 174rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffd257;

  .item-box {
    padding: 18rpx 26rpx 0 26rpx;

    .item {
      position: relative;
      width: 330rpx;
      height: 80rpx;

      image {
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 330rpx;
        height: 80rpx;
      }

      .b-txt {
        font-family: IPix;
        font-size: 36rpx;
        color: #000000;
        width: 330rpx;
        height: 80rpx;
      }
    }
  }
}

.main {
  padding-bottom: 174rpx;

  .swiper {

    .swiper-box {
      height: 707rpx;

      .item {
        image {
          width: 100%;
          height: 707rpx;
        }

        .current-box {
          position: absolute;
          bottom: 29rpx;
          right: 34rpx;

          .current {
            position: relative;
            width: 78rpx;
            height: 38rpx;

            image {
              width: 78rpx;
              height: 38rpx;
            }

            .num {
              position: absolute;
              top: 3rpx;
              left: 20rpx;
              width: 78rpx;
              height: 38rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #FFFFFF;
            }
          }
        }

      }
    }
  }

  .content {
    margin-top: -20rpx;
    border-radius: 20rpx 20rpx 0 0;
    background: #ffbf0f;
    padding: 40rpx;

    .desc {
      padding: 10rpx;
      margin-bottom: 32rpx;

      .desc-box {
        border: 8rpx solid #e6bd4e;
        padding: 20rpx;

        .one {
          margin: 0 0 32rpx 0;

          .price {
            font-family: IPix;
            font-size: 44rpx;
            color: #000000;
          }

          .collect {
            .collect-box {
              .num {
                font-family: IPix;
                font-size: 28rpx;
                color: #000000;
              }

              .icon {
                margin-left: 5rpx;
                padding-bottom: 3rpx;
                width: 35rpx;
                height: 29rpx;
                image {
                  width: 35rpx;
                  height: 29rpx;
                }
              }
            }
          }
        }

        .title {
          font-family: IPix;
          font-size: 36rpx;
          color: #4E3B0C;
        }

        .line {
          height: 6rpx;
          width: 604rpx;
          background: #83681c;
          margin: 28rpx 0;
        }

        .user {
          .info {
            .avatar {
              margin-right: 20rpx;
              border: 1rpx solid #FFFFFF;
              border-radius: 50%;
              width: 74rpx;
              height: 74rpx;
              position: relative;

              .q {
                width: 74rpx;
                height: 74rpx;
              }

              image {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                width: 74rpx;
                height: 74rpx;
                border-radius: 50%;
              }
            }

            .name {
              font-family: IPix;
              font-size: 22rpx;
              color: #000000;
            }
          }

          .user-id {
            font-family: IPix;
            font-size: 22rpx;
            color: #000000;
          }
        }
      }

    }

    .text {
      .title {
        margin-bottom: 30rpx;

        .txt {
          font-family: IPix;
          font-size: 30rpx;
          color: #4E3B0C;
          margin: 0 10rpx;
        }

        .l, .r {
          width: 16rpx;
          height: 16rpx;
        }
      }

    }
  }
}

.bary-box {
  margin-top: 60rpx;
  display: flex;
  justify-content: center;

  .submit-box {
    width: 100%;
    margin-top: 80rpx;

    .submit-content {
      width: 146rpx;
      height: 86rpx;
      position: relative;

      image {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 146rpx;
        height: 86rpx;
      }

      .submit {
        font-family: IPix;
        font-size: 30rpx;
        color: #FFFFFF;
        position: absolute;
        transform: (-50%, -50%)
      }
    }

  }

  .ipt-box {
    position: relative;
    width: 404rpx;
    height: 60rpx;

    .ipt-bg {
      width: 404rpx;
      height: 60rpx;
      position: relative;

      input {
        position: absolute;
        top: 0;
        left: 0;
        height: 60rpx;
        padding: 0 0 0 20rpx;
        color: #fff;
      }

      image {
        width: 404rpx;
        height: 60rpx;
      }
    }
  }

  .edit {
    position: absolute;
    top: 10rpx;
    right: 15rpx;

    image {
      width: 23rpx;
      height: 23rpx;
    }
  }
}
</style>